import React from 'react'
import { SearchBar } from 'antd-mobile'
// 引入样式文件
import '@/assets/css/home.scss';
// 引入到首页
import ListCom from '@/components/ListCom';

// 导入定义的数据接口
import { getlistdata } from '@/api/home';
import { useEffect, useState } from 'react'
// 导入数据类型声明文件
import { listItem } from '@/types/dataTypes'
type Props = {}

export default function Home({ }: Props) {
    // 定义列表接口数据 
    const [listdata, setlistdata] = useState<listItem[]>([]);
    // 定义 boolean, 根据该boolean 判断是否需要重新请求数据
    const [hasMore, setHasMore] = useState(true)
    // 定义当前页 
    const [page, setpage] = useState(1)
    async function loadMore() {
        const append = await getlistdata({ count: page, limitNum: 10 })
        console.log('append', append.data.data)
        setlistdata(val => [...val, ...append.data.data])
        setHasMore(append.data.data.length > 0)
        // 修改当前页page 
        setpage(page + 1)
    }

    return (
        <div className='home'>
            {/* 头部 */}
            <div className='header'>
                <span>地址</span>
                <SearchBar
                    placeholder='请输入内容'
                    style={{ '--background': '#ffffff', '--height': '34px', 'flex': 1, 'marginLeft': '10px', 'marginRight': '10px' }}
                />
                <span>登录</span>
            </div>
            {/* 列表部分 */}
            <ListCom loadMore={loadMore} hasMore={hasMore} listdata={listdata}></ListCom>

        </div>
    )
}